<template>
    <div class="login_body">
        <div class="demo-login">
            <h2>采购平台</h2>
            <Login @on-submit="handleSubmit">
                <UserName name="username" value="aresn"/>
                <Password name="password" value="aresn"/>
                <div class="demo-auto-login">
                    <Checkbox v-model="autoLogin" size="large">自动登录</Checkbox>
                    <a>忘记密码</a>
                </div>
                <Submit/>
            </Login>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            autoLogin: true,
            showModel: true,
        }
    },
    methods: {
        handleSubmit(valid, {username, password}) {
            if (valid) {
                this.$Modal.info({
                    title: '输入的内容如下：',
                    content: 'username: ' + username + ' | password: ' + password
                });
                this.$router.push('/admin')
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.login_body {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #d037ca;
    background-image: url('@/assets/images/login_bg.jpg');
    background-position: center;
    background-size: cover;
    .demo-login {
        position: fixed;
        top: 100px;
        width: 500px;
        margin: 0 auto !important;
        background-color: #fff2f2;
        padding: 50px 60px;
        border-radius: 10px;
    }
    .demo-auto-login {
        margin-bottom: 24px;
        text-align: left;
    }
    .demo-auto-login a {
        float: right;
    }
}
</style>
